<template>
  <div class="goodmenu">
    <!-- 头部 -->
    <div class="good_header">
      <van-icon name="arrow-left" @click.native="$router.back()" />
    </div>
    <!-- 店铺公告 -->
    <div class="good_show">
      <div class="goodShow_left">
        <img
          :src="'//elm.cangdu.org/img/' + restaurantInfo.image_path"
          alt=""
        />
      </div>
      <div class="goodShow_middle">
        <div class="goodName">{{ restaurantInfo.name }}</div>
        <span
          >商家配送 / 分钟送达 /
          {{
            restaurantInfo.piecewise_agent_fee &&
            restaurantInfo.piecewise_agent_fee.tips
          }}</span
        >
        <span>公告:{{ restaurantInfo.promotion_info }} </span>
      </div>
      <div class="goodShow_right">
        <van-icon name="arrow" @click="goparticulars" />
      </div>
    </div>

    <!-- 商品与评价 -->
    <van-tabs v-model="activeName">
      <van-tab
        title="商品"
        name="a"
        :to="{
          path: '/goodsmenu/elegoodcom',
          query: {
            id: restaurantInfo.id,
          },
        }"
      ></van-tab>
      <van-tab
        title="评价"
        name="b"
        :to="{
          path: '/goodsmenu/elegoodappraise',
          query: {
            id: restaurantInfo.id,
          },
        }"
      ></van-tab>
      <router-view></router-view>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
      restaurantInfo: {},
    };
  },
  created() {
    if (this.$route.query.obj) {
      this.restaurantInfo = this.$route.query.obj;
      console.log(41, this.restaurantInfo);
    }
  },
  methods: {
    goparticulars() {
      // console.log("跳跳跳");
      this.$router.push("/particulars");
    },
  },
};
</script>

<style lang="less" scoped >
.goodmenu {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  .good_header {
    width: 100%;
    min-width: 100%;
    position: fixed;
    color: #fff;
    font-size: 30px;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
  }
  .good_show {
    display: flex;
    align-items: center;
    height: 88px;
    background-color: #aeb1c2;
    padding-left: 13px;
    /* 左边 */
    .goodShow_left {
      width: 70px;
      height: 70px;
      img {
        width: 100%;
      }
    }
    /* 中间 */
    .goodShow_middle {
      flex: 5;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #fff;
      .goodName {
        font-size: 20px;
        font-weight: bold;
      }
      span {
        font-size: 13px;
      }
    }
    //右边
    .goodShow_right {
      flex: 1;
      color: #fff;
      font-size: 20px;
    }
  }
  /deep/.van-tabs__wrap {
    border-bottom: 1px solid #aeb1c2;
    .van-tab--active {
      color: #3190e8;
    }
    .van-tabs__line {
      bottom: 23px;
      width: 30px;
      background-color: #3190e8;
    }
  }
}
</style>